Vue动画多个元素嵌套使用过渡

前言

• 在我们前端的工作中我们的去写页面，总会觉得这样的效果给到用户好像很干没有什么体验
• 那我们就想搞搞新意思？
• 弄点动画上去憋，那么弄动画我又想他滚动又想他偏移又想有渐变效果
• 渐变和移动可以写在一起，但是滚动和偏移好像不可以一起执行喔
• 那我们就要分开两步来执行但是，vue的transition里面好像不可以同时执行两个transform
• 所以我们就来解决这个问题
• 其实嘛是可以嵌套使用的哦

工具/资料

• mac os 10.13.3
• vue官方文档 https://cn.vuejs.org/v2/guide/transitions.html
• vs code

开始

1. 套用我们的 transition

   • 在我们需要定义效果的外面包上 transition
   • 这个 name 呢是自定义的也可以不写，个人认为最好是写一下

     <transition name="move">
         <div class="cart-decrease" v-show="food.count>0" @click="decreaseCart">
             <span class="inner icon-remove_circle_outline"></span>
         </div>
     </transition>

2. 定义Css

   • 如果使用name了，-前面写的就是name定义的名称，如果没有写那就直接用v就好
   • 在我们要嵌套动画的地方也是向平时css关系那些嵌套进去就好了

     /* 这里我们定义了滑动和渐变 */
     .move-enter-active, .move-leave-active
         transition: all .4s linear
         opacity: 1
         transform translate3d(0,0,0)
     .move-enter, .move-leave-to /* .fade-leave-active below version 2.1.8 */
         opacity: 0
         transform translate3d(24px,0,0)
     
     /* 
         定义滚动
         这里我是动画下的，span想添加效果
         那么我们就把类名拼接在后面去使用就好了
         如果添加了不生效，那就换一个类名，因为有一些是官方的类名是不允许使用的
      */
     .move-enter-active .inner, .move-leave-active .inner
         transition: all .4s linear
         transform rotate(0)
     .move-enter .inner, .move-leave-to .inner
         transform rotate(180deg)

• 这样我们就实现了即滚动也偏移

后记

• 看了有没有发现很简单哈，其实本来也就是很简单嘛，只是一开始傻乎乎的用了in使得效果没粗来以为不可以这样用
• 这是本人的学习问题记录的笔记，有需要的可以借鉴
• 欢迎添加微信交流学习
• 欢迎进入我的博客：https://yhf7.github.io/
• 如果有什么侵权的话，请及时添加小编微信以及qq也可以来告诉小编（905477376微信qq通用），谢谢！